<template>
  <div>
    {{$route.params.id}}
    <p>id:{{ messageDetail.id }}</p>
    <p>title:{{ messageDetail.title }}</p>
    <p>content: {{ messageDetail.content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MessageDetail',
  components: {},
  props: {},
  data() {

    return {
      messageDetail: {}
    };
  },
  mounted() {
    setTimeout(() => {
      const messageDetails = [{
        id: 1,
        title: '01',
        content: 'detail 01...'
      }, {
        id: 2,
        title: '02',
        content: 'detail 02...'
      }, {
        id: 3,
        title: '03',
        content: 'detail 03...'
      }, {
        id: 4,
        title: '04',
        content: 'detail 04...'
      }];
      this.messageDetails = messageDetails;
      console.log("this.messageDetails",this.messageDetails);
      console.log("this.$route",this.$route);

      const id = this.$route.params.id * 1
      this.messageDetail = this.messageDetails.find((detail) => detail.id === id);
    }, 1000);

  },
  watch: {
    $route: function (value) {
      const id = value.params.id * 1
      this.messageDetail = this.messageDetails.find((detail) => detail.id === id);
    }
  }

};
</script>

<style scoped>

</style>
